<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})">
    <title>商品分类</title>
    <link href="js/jquery-confirm/jquery-confirm.min.css" th:href="@{/js/jquery-confirm/jquery-confirm.min.css}" rel="stylesheet">
    <link href="/js/ztree-3.5/metroStyle/metroStyle.css" rel="stylesheet" th:href="@{/css/metroStyle/metroStyle.css}" >
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">商品分类</div>
                    <ul class="card-actions">
                        <li>
                            <a href="#!" data-toggle="tooltip" title="" data-original-title="刷新"><i class="mdi mdi-refresh"></i></a>
                        </li>
                    </ul>
                </header>
                <div class="card-body">
                    <ul id="treeData" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/common_foot :: foot"></div>
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
<script type="text/javascript" th:src="@{/js/form-util.js}"></script>
<script type="text/javascript" th:src="@{/js/ztree-3.5/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/ztree-3.5/jquery.ztree.exedit.js}"></script>
<script type="text/javascript">
    var setting = {
        view: {
            selectedMulti: false
        },
        async: {
            enable: true,
            url:"/cat/getGoodsCatList",
            autoParam:["id", "name", "level"],
            // contentType: "application/json; charset=UTF-8",
            otherParam:{"pid":0},
            dataFilter: filter
        },
        edit: {
            editNameSelectAll: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn,
        },
        data: {
            key : {
                name : "name" //展开树的名字
            }
        },
        callback: {
            beforeClick: beforeClick,
            beforeAsync: beforeAsync,
            onAsyncError: onAsyncError,
            onAsyncSuccess: onAsyncSuccess,
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }


    //显示删除按钮
    function showRemoveBtn(treeId, treeNode) {
        return false;
    }

    //显示修改按钮
    function showRenameBtn(treeId,treeNode){
        return false;
    }

    /**
     * 点击之前
     * @param treeId
     * @param treeNode 被单击的节点 JSON 数据对象
     * @returns {boolean}
     */
    function beforeClick(treeId, treeNode) {

        var id = treeNode.id
        $.post("/cat/getCatVo",{"id":id},function (res){
            console.log(res)
            if (!treeNode.isParent){
                sessionStorage.setItem("select",JSON.stringify(res));
            }
        })
        return true;
    }
    var log, className = "dark";
    function beforeAsync(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        showLog("[ "+getTime()+" beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
        return true;
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        showLog("[ "+getTime()+" onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        showLog("[ "+getTime()+" onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
    }

    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='"+className+"'>"+str+"</li>");
        if(log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
        return (h+":"+m+":"+s+ " " +ms);
    }

    function refreshNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = e.data.type,
            silent = e.data.silent,
            nodes = zTree.getSelectedNodes();
        if (nodes.length == 0) {
            alert("请先选择一个父节点");
        }
        for (var i=0, l=nodes.length; i<l; i++) {
            zTree.reAsyncChildNodes(nodes[i], type, silent);
            if (!silent) zTree.selectNode(nodes[i]);
        }
    }

    /**
     * 渲染
     */
    $(document).ready(function(){
        $.fn.zTree.init($("#treeData"), setting);
        $("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode);
        $("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
        $("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
        $("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
    });

    /**
     * 刷新当前选中的节点
     */
    function refresh(){
        var zTree = $.fn.zTree.getZTreeObj("treeData")
        let type = 'refresh'
        let silent = false;

        //获取当前选中的节点
        var nodes = zTree.getSelectedNodes()

        //加载加载节点的子节点
        zTree.reAsyncChildNodes(nodes[0],type,silent);
    }

    /**
     * 刷新当前节点的父节点
     */
    function refreshParentNode(){
        var zTree = $.fn.zTree.getZTreeObj("treeData")
        let type = 'refresh'
        let silent = false;

        //获取当前选中的节点
        var nodes = zTree.getSelectedNodes()

        //根据JSON的唯一标识 获取节点的JSON对象
        var parentNode = zTree.getNodeByTId(nodes[0].parentTId)

        //选中指定节点
        zTree.selectNode(parentNode)

        //加载加载节点的子节点
        zTree.reAsyncChildNodes(parentNode,type,silent);
    }

    /**
     * 将选中的值传递给父窗口
     * @returns {string}
     */
    function get(){
        var item = sessionStorage.getItem("select");
        return item;
    }

</script>
</body>
</html>